<template>
	<view class="banner">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,index) in banner" :key="index">
							<image class="image"  :src="item.url" :alt="item.title"/>
						</swiper-item>
			</swiper>
	</view>
	<view class="h4" v-if="loaded">
		<text >推荐|</text>
	</view>
	<view class="recommend">
		<view class="item" v-for="(item,index) in recommend" :key="index">
			<view class="product-img" @click="toProduct(item)"><image class="image" :src="item.image" :alt="item.name" /></view>
			<view class="product-name">{{item.name}}</view>
		</view>
	</view>
	<view class="h4" v-if="loaded">
			<text>新闻|</text>
	</view>
	<view class="news">
	
		<view class="news-item" v-for="(item,index) in news" :key="index">
			<view class="left">
				<image class="image" :src="item.image" :alt="item.title" />
			</view>
			<view class="right">
				<view class="news-title">
					<a :href="'/news/info/'+item.id">{{item.title}}</a>
				</view>
				<view class="news-content">
					<text>{{item.description}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getIndex} from '../../api/index.js';
	
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				banner:[],
				news:[],
				products:[],
				recommend:[],
				loaded:false
			}
		},
		onLoad() {
			getIndex().then(res=>{
				this.banner = res.banner;
				this.news = res.news;
				this.products = res.products;
				this.recommend = res.recommend;
				this.loaded = true;
			});
		},
		methods: {
			toProduct(info) {
				console.log(info)
				uni.navigateTo({
					url:"/pages/product/product?id="+info.id
				})
			}
		}
	}
</script>

<style>
	.banner .image{width:100%}
	
	.recommend{
		display: flex;
		flex-wrap: wrap;
	}
	.recommend .item{
		width: 50%;
	}
	.product-img .image{
		width:100%;
		text-align: center;
	}
	.news .image{
		width:100%;
	}
	.h4{
		margin:20upx;
		color: aquamarine;
	}
	.news-item{
		display: flex;
	}
	.news .left{
		width:375upx;
		height:375upx;
	}
	
	.recommend .product-name{
		text-align: center;
	}
</style>
